<template>
    <el-card>
        <template #header>
            <label style="font-size: 30px; ">申请记录</label>
        </template>
        <el-empty v-if="apply.length == 0" description="未找到申请记录"/>
        <div v-else v-for="(item, index) in apply" :key="index">
            <el-row>
                <el-col :span="11" style="padding-left: 20px; ">
                    <div style="font-size: 18px; ">
                        认领作者: {{item.authorName}}
                    </div>
                    <div style="font-size: 14px; margin: 10px 0 0 10px; ">
                        认领邮箱: {{item.email}}
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="date">
                        <label>申请时间:</label><br/>
                        <label>{{item.applyDate}}</label>
                    </div>
                </el-col>
                <el-col :span="5" class="option">
                    <el-dropdown v-if="item.isPermitted == null || item.isPermitted == undefined">
                        <div class="s-btn waiting">
                            <label class="s-text">待处理</label>
                        </div>
                    </el-dropdown>
                    <el-dropdown v-else-if="item.isPermitted">
                        <div class="s-btn pass">
                            <label class="s-text">通过</label>
                        </div>
                    </el-dropdown>
                    <el-dropdown v-else>
                        <div class="s-btn reject">
                            <label class="s-text">不通过</label>
                        </div>
                    </el-dropdown>
                </el-col>
                <el-col :span="2">
                    <div v-if="item.isPermitted == null || item.isPermitted == undefined"
                        class="cancel"
                        @click="deleteApply(index)">
                        撤销申请
                    </div>
                    <div v-else-if="item.isPermitted"/>
                </el-col>
              <el-col :span="2">
                <el-button type="text" @click="openApplyInfo(item.applyId)">详情</el-button>
              </el-col>
            </el-row>
            <el-divider/>
            <el-row>
                <div v-if="item.isPermitted != undefined && !item.isPermitted" class="reason">
                        <span style="margin-bottom: 10px;">不通过理由:</span><br/>
                        {{item.reject}}
                </div>
            </el-row>
        </div>
    </el-card>

  <ApplyInfo ref="applyInfo"></ApplyInfo>
</template>

<script>
import axios from "@/utils/MyAxios"
import qs from "qs"
import { ElMessageBox } from 'element-plus'
import ApplyInfo from "../../portal/components/ApplyInfo";
export default {
  components:{
    ApplyInfo
  },
    mounted(){
        let user = JSON.parse(localStorage.getItem('user'))
        if (user != null) {
            this.$store.commit('setToken', user.token)
        }
        console.log(this.token)
        this.updateInfo()
    },
    data() {
        return {
            apply: [],
        }
    },
    computed: {
        token() {
            return this.$store.state.user.token
        }
    },
    methods: {
      openApplyInfo(applyId){
        this.$refs.applyInfo.openInfo(applyId);
      },
        updateInfo() {
            axios.post('/api/apply/claim/list', qs.stringify({token: this.token}))
                .then(res => {
                    const data = res.data
                    console.log(res)
                    if (data.code == 0) {
                        this.apply = data.data
                    }
                })
                .catch(err => {
                    this.$message.info({message: err.message, showClose: true})
                })
        },
        deleteApply(index) {
            ElMessageBox.confirm(
                '取消该次申请. 您确定吗?',
                'Warning',
                {
                    confirmButtonText: '继续',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    axios.post('/api/apply/cancel', qs.stringify({applyId: this.apply.at(index).applyId}))
                        .then(res => {
                            const data = res.data
                            if (data.code == 0) {
                                console.log(this.apply)
                                this.$message.success({message:'已取消申请',showClose: true})
                                this.apply.splice(index, 1)
                                console.log(this.apply)
                            }
                        })
                })
        }
    }
}
</script>

<style scoped>
.mr-4 {
    margin-right: 4px;
}
.avatar {
    padding-left: 50px;
}
.pointer {
    cursor: pointer;
}
.option {
    padding-left: 95px;
    line-height: 50px;
}
.s-btn {
    vertical-align: middle;
    border-radius: 4px;
    padding: 4px 11px 4px 9px;
    line-height: 16px;
    border: 0;
}
.waiting {
    background-color: #e5e9ef;
}
.pass {
    background-color: #2bee3c;
}
.reject {   
    background-color: #ff2104;
}
.s-text{
    color: black;
}
.cancel {
    font-size: 15px;
    height: 100%;
    line-height: 50px;
    color: red;
    cursor: pointer;
}
.reason {
    margin-left: 20px;
    font-size: 15px;
    height: 100%;
}
.date {
    width: 100%;
    height: 100%;
    text-align: center;
}
</style>